<template>
  <div>
    <div class="main_content">
      <el-row class="button">
        <el-button type="primary" size="mini" @click="saveData()">
          <i class="el-icon-circle-check" style="margin-right:5px;"></i>
          保存
        </el-button>
        <el-button size="mini" @click="goBack()">
          <i class="el-icon-switch-button" style="margin-right:5px;"></i>
          退出
        </el-button>
      </el-row>
      <div class="name">
        <el-row>
          <el-form id="userEdit" :model="theEdit" :inline="true" label-width="100px">
            <el-form-item label="姓名：" prop="user_name">
              <el-input type="text" v-model="theEdit.user_name" disabled></el-input>
              <!-- <span>{{theEdit.userName}}</span> -->
            </el-form-item>
            <el-form-item label="账号：" prop="user_account">
              <!-- <span>{{theEdit.phoneNumber}}</span> -->
              <el-input type="text" v-model="theEdit.user_account" disabled></el-input>
            </el-form-item><br>
            <el-form-item label="是否禁用：" prop="state">
              <el-radio-group v-model="theEdit.state" disabled>
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="2">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <!-- <el-col :span="4">
            <span>姓名：</span><span>{{ueserName}}</span>
          </el-col>
          <el-col :span="4">
            <span>账号：</span><span>{{account}}</span>
          </el-col> -->

        </el-row>
        <!-- <el-row>
          <span>是否禁用：</span>
          <el-radio-group v-model="theEdit.userState">
            <el-radio label="启用"></el-radio>
            <el-radio label="禁用"></el-radio>
          </el-radio-group>
        </el-row> -->
      </div>
      <div class="select">
        <el-form :model="theEdit" :inline="true" label-width="100px">
          <el-row>
          <el-col :span="4" style="text-align:center">
            <span>角色列表</span>
          </el-col>
          <el-col :span="4" style="text-align:center">
            <span>配置权限</span>
          </el-col>
        </el-row>
          <el-form-item label="" prop="role_id" style="margin-left:20px;">
            <el-select v-model="theEdit.role_id" ref="select">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="menu_d" style="margin-left:50px;">
            <el-select v-model="theEdit.menu_d" collapse-tags multiple @change="" ref="select2">
                <div ref=z0 style="line-height: 26px" class="tCenter cPointer font14" z-hover='opacity:0.9;color:#409EFF;' @click=' theEdit.menu_d = theEdit.menu_d.length >= optionsAll.length ? [] : optionsAll.map(v=>v.value) '>
                    {{ theEdit.menu_d.length >= optionsAll.length ? '取消全选' : '全选' }}
                </div>
                <el-option
                    v-for="item in optionsAll"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <!-- <el-row>
          <el-col :span="4" style="text-align:center">
            <span>角色列表</span>
          </el-col>
          <el-col :span="4" style="text-align:center">
            <span>配置权限</span>
          </el-col>
        </el-row> -->
        <!-- <el-row>
          <el-col :span="4" style="text-align:center">
            <el-select v-model="role">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
          </el-col>
          <el-col :span="4" style="text-align:center">
            <el-select v-model="roleAll" collapse-tags multiple @change="selectAll">
              <el-option
                v-for="item in optionsAll"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row> -->
      </div>
    </div>
  </div>
</template>
<script>
import myhttp, {
  isEmpty,
  msgError,
  msgSuccess,
  msgWarning
} from "../../utils/myhttp";
import qs from "qs";
import api from "../../utils/api";
export default {
  data() {
    return {
      theEdit: {
        user_name: this.$route.params.user_name,
        user_account: this.$route.params.user_account,
        state: this.$route.params.state,
        role_id: this.$route.params.role_id,
        menu_d: '',
      },
      loading: "",
      ueserName: "",
      account: "",
      goods_number:"",//是否禁用
      options:[
        { value: "1",label: "系统管理员" },
        { value: "2",label: "项目运营员" }
      ],
      role:"",
      roleAll:"",
      optionsAll:[
        // { value: "ALL", label: "全选" },
        { value: "1", label: "轮播图管理" },
        { value: "2", label: "项目管理" },
        { value: "3", label: "用户管理" },
        { value: "4", label: "权限管理" },
        { value: "5", label: "日志管理" },
        { value: "6", label: "帮助管理" },
        { value: "7", label: "供应商管理" },
      ],
      oldOptions:[],//存储上一次数据
      user_id: this.$route.params.user_id,
    };
  },
  components: {},
  methods: {
    /*selectAll(val) {
      let allValues = [];
      for (let item of this.optionsAll) {
        allValues.push(item.value)
      };
      const oldVal = this.oldOptions.length === 1 ? this.oldOptions[0] : [];
      if (val.includes('ALL')) this.roleAll = allValues;
      if (oldVal.includes('ALL') && !val.includes('ALL')) this.roleAll = [];
      if (oldVal.includes('ALL') && val.includes('ALL')) {
        const switch = val.indexOf('ALL');
        val.splice(switch, 1);
        this.roleAll = val;
      };
      if (!oldVal.includes('ALL') && !val.includes('ALL')) {
        console.log(11)
        if (val.length === allValues.length - 1) this.roleAll = ['ALL'].concat(val);
      }
      //储存当前最后的结果 作为下次的老数据
      this.oldOptions[0] = this.roleAll;
    },*/
    goBack() {
      this.$router.go(-1);
    },
    openLoading() {
      //loading请求等待
      this.loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
    //保存
    saveData: async function() {
     var res = await $.post('addUserMenu',{
        userId: this.user_id,
        roleId: this.theEdit.role_id,
        menuIdList: this.theEdit.menu_d.map(v=>({menuId:v}))
      });
      if(!res.success) return $.msgError(res.msg||'error!');
      $.msgSuccess(res.msg||'success!');
    }
  },
  created() {
    this.theEdit.menu_d = this.$route.params.menu_d.map(v=>v.menuId);
    // console.warn(this.optionsAll);
  },
  mounted() {
    this.$refs.select.toggleMenu();
    this.$refs.select2.toggleMenu()
  }
};
</script>
<style scoped>
  .button{
     margin-bottom: 20px;
  }
  .name{
    border:1px solid #d4d4d4;
    padding-left:20px;
  }
  .name .el-row:first-child,.name .el-row:nth-child(2){
    margin-top:20px;
  }
  .select{
    border:1px solid #d4d4d4;
    padding:0 10px 120px 10px;
    margin-top:20px;
    height: 300px;
  }
  .select .el-row:first-child{
     margin:20px 0;
     border-bottom: 1px solid #d4d4d4;
     padding-bottom: 20px;
  }
</style>


